<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片放大特效</title>
		<style>
			#box {
				width: 350px;
				height: 350px;
				border: 1px solid #CCCCCC;
				position: relative;
			}
			
			#bigBox {
				width: 400px;
				height: 400px;
				display: none;
				top: 0;
				left: 360px;
				position: absolute;
				overflow: hidden;
				border: 1px solid #CCCCCC;
			}
			
			#mask {
				width: 175px;
				height: 175px;
				background: rgba(255, 255, 2, 0.4);
				position: absolute;
				top: 0;
				left: 0;
				cursor: move;
			}
			
			#bigImg {
				position: absolute;
			}
		</style>
	</head>

	<body>

		<div id="box">
			<div id="smallBox">
				<img src="small.jpg" />
				<div id="mask"></div>
			</div>
			<div id="bigBox">
				<img src="big.jpg" id="bigImg" />
			</div>
		</div>

		<script>
			function $(obj) {
				return document.getElementById(obj);
			}
			$('smallBox').onmouseover = function() {
				$('mask').style.display = 'block';
				$('bigBox').style.display = 'block';
			}
			$('smallBox').onmouseout = function() {
				$('mask').style.display = 'none';
				$('bigBox').style.display = 'none';
			}
			$('smallBox').onmousemove = function() {

				var pageX = event.pageX;
				var pageY = event.pageY;

				var maskX = pageX - $('mask').offsetWidth / 2;
				var maskY = pageY - $('mask').offsetHeight / 2;

				if(maskX < 0) {
					maskX = 0;
				}
				if(maskY < 0) {
					maskY = 0;
				}
				if(maskX > $('box').offsetWidth - $('mask').offsetWidth) {
					maskX = $('box').offsetWidth - $('mask').offsetWidth
				}
				if(maskY > $('box').offsetWidth - $('mask').offsetWidth) {
					maskY = $('box').offsetWidth - $('mask').offsetWidth
				}

				$('mask').style.left = maskX + 'px';
				$('mask').style.top = maskY + 'px';

				var bigImgToMove = $('bigImg').offsetWidth-$('bigBox').offsetWidth;
				var maskToMove = $('smallBox').offsetWidth-$('mask').offsetWidth;
				var rate = bigImgToMove/maskToMove;
				$('bigImg').style.left = -rate*maskX + 'px';
				$('bigImg').style.top = -rate *maskY+ 'px';

			}
		</script>

	</body>

</html>